<template>
  <div class="assessment">
    <el-form ref="form" :inline="true" :model="queryParams" label-width="80px">
      <el-form-item label="一级领域">
        <el-select v-model="queryParams.firstType" placeholder="请选择" @change="classAbtnTwo">
          <el-option v-for="dict in selectClassA" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级领域">
        <el-select v-model="queryParams.secondType" placeholder="请选择">
          <el-option v-for="dict in selectSecondary" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="queryParams.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchList">搜索</el-button>
        <el-button @click="restting">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-plus" size="mini" @click="showDialog">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题" align="center">
      </el-table-column>
      <el-table-column prop="firstType" label="一级领域" align="center">
        <template slot-scope="scope">
          <div>
            <span v-html="scope.row.firstType == 1
                ? '情感支持'
                : scope.row.firstType == 2
                  ? '活动组织'
                  : '教学支持'
              "></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="secondType" label="二级领域" align="center">
        <template slot-scope="scope">
          <div>
            <span v-html="scope.row.secondType == 1
            ? '积极氛围'
            : scope.row.secondType == 2
            ? '消极氛围'
            : scope.row.secondType == 3
            ? '教师敏感性'
            : scope.row.secondType == 4
            ? '关注幼儿观点'
            : scope.row.secondType == 5
            ? '行为管理'
            : scope.row.secondType == 6
            ? '活动安排效率'
            : scope.row.secondType == 7
            ? '教学活动形式'
            : scope.row.secondType == 8
            ? '认知发展'
            : scope.row.secondType == 9
            ? '反馈质量'
            :'语言示范'">
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <el-button type="text" icon="el-icon-edit" @click="editList(scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" @click="deleteList(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="questionList" />
    <el-dialog :title="type == 1 ? '新增课堂评价' : '修改课堂评价'" :visible.sync="dialogVisible" width="30%"
      :close-on-click-modal="false" @close="handleClose">
      <div class="assessment-dialig">
        <el-form ref="paramsInfo" :rules="rules" :inline="true" :model="paramsInfo" label-width="100px">
          <el-form-item label="标题:" prop="title">
            <el-input v-model="paramsInfo.title" placeholder="请输入标题" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="可选内容:">
            <el-button size="mini" type="primary" style="margin-bottom: 10px" @click="addContent">新增可选内容</el-button>
            <div v-for="(item, index) in selectContent" :key="index" style="display: flex">
              <el-input v-model="item.value" placeholder="请输入可选内容" style="width: 300px; margin: 0 10px 10px 0"></el-input>
              <el-button type="text" icon="el-icon-delete" v-if="selectContent.length !== 1"
                @click="deleteContent(item.id)"></el-button>
            </div>
          </el-form-item>
          <el-form-item label="一级领域：" prop="firstType">
            <el-select v-model="paramsInfo.firstType" placeholder="请选择" style="width: 300px" @change="classAbtn">
              <el-option v-for="dict in selectClassA" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item label="二级领域：" prop="secondType">
            <el-select v-model="paramsInfo.secondType" placeholder="请选择" style="width: 300px">
              <el-option v-for="dict in selectSecondary" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="mini">取 消</el-button>
        <el-button type="primary" @click="addSure" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  questionAdd,
  questionList,
  deleteQuestion,
  questionEdit,
} from "@/api/teach/assessment.js";
export default {
  name: "",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      selectClassA: [
        {
          dictValue: 1,
          dictLabel: "情感支持",
        },
        {
          dictValue: 2,
          dictLabel: "活动组织",
        },
        {
          dictValue: 3,
          dictLabel: "教学支持",
        },
      ], // 一级领域
      selectSecondary: [], // 二级领域
      tableData: [], // 列表
      dialogVisible: false,
      paramsInfo: {
        comment: "",
      },
      selectContent: [
        {
          id: 1,
          value: "",
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "change" }],
        secondType: [
          { required: true, message: "请选择二级领域", trigger: "change" },
        ],
        firstType: [
          { required: true, message: "请选择一级领域", trigger: "change" },
        ],
        comment: [{ required: true, message: "请输入可选内容" }],
      },
      type: null,
    };
  },
  created() { },
  components: {},
  computed: {},
  mounted() {
    this.questionList();
  },
  methods: {
    classAbtn(val) {
      if (val == 1) {
        this.selectSecondary = [
          {
            dictValue: 1,
            dictLabel: "积极氛围",
          },
          {
            dictValue: 2,
            dictLabel: "消极氛围",
          },
          {
            dictValue: 3,
            dictLabel: "教师敏感性",
          },
          {
            dictValue: 4,
            dictLabel: "关注幼儿观点",
          },
        ];
      } else if (val == 2) {
        this.selectSecondary = [
          {
            dictValue: 5,
            dictLabel: "行为管理",
          },
          {
            dictValue: 6,
            dictLabel: "活动安排效率",
          },
          {
            dictValue: 7,
            dictLabel: "教学活动形式",
          },
        ];
      } else if (val == 3) {
        this.selectSecondary = [
          {
            dictValue: 8,
            dictLabel: "认知发展",
          },
          {
            dictValue: 9,
            dictLabel: "反馈质量",
          },
          {
            dictValue: 10,
            dictLabel: "语言示范",
          },
        ];
      }
    },
    classAbtnTwo(val) {
      if (val == 1) {
        this.selectSecondary = [
          {
            dictValue: 1,
            dictLabel: "积极氛围",
          },
          {
            dictValue: 2,
            dictLabel: "消极氛围",
          },
          {
            dictValue: 3,
            dictLabel: "教师敏感性",
          },
          {
            dictValue: 4,
            dictLabel: "关注幼儿观点",
          },
        ];
      } else if (val == 2) {
        this.selectSecondary = [
          {
            dictValue: 5,
            dictLabel: "行为管理",
          },
          {
            dictValue: 6,
            dictLabel: "活动安排效率",
          },
          {
            dictValue: 7,
            dictLabel: "教学活动形式",
          },
        ];
      } else if (val == 3) {
        this.selectSecondary = [
          {
            dictValue: 8,
            dictLabel: "认知发展",
          },
          {
            dictValue: 9,
            dictLabel: "反馈质量",
          },
          {
            dictValue: 10,
            dictLabel: "语言示范",
          },
        ];
      }
    },
    // 新增弹窗
    showDialog() {
      this.paramsInfo = {}
      // this.$refs.paramsInfo.resetFields();
      this.selectContent = [
        {
          id: 1,
          value: "",
        },
      ];
      this.type = 1;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 修改弹窗
    editList(row) {
      this.type = 2;
      const list = row.commentList;
      this.selectContent = [];
      list.forEach((item, index) => {
        const obj = {
          id: index + 1,
          value: item,
        };
        this.selectContent.push(obj);
      });
      this.paramsInfo = { ...row };
      this.paramsInfo.firstType = row.firstType;
      this.paramsInfo.secondType = row.secondType;
      this.dialogVisible = true;
    },
    // 搜索
    searchList() {
      this.questionList();
    },
    restting() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.searchList();
    },
    // 删除课程评价
    deleteList(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data, code, msg } = await deleteQuestion(id);
        if (code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.searchList();
        } else {
          this.$message.error(msg);
        }
      });
    },
    // 增加可选项
    addContent() {
      const obj = {
        id: this.selectContent.length + 1,
        value: "",
      };
      this.selectContent.push(obj);
    },
    // 删除可选项
    deleteContent(id) {
      this.selectContent.forEach((item, index) => {
        if (item.id === id) {
          this.selectContent.splice(index, 1);
        }
      });
      this.selectContent.forEach((item, index) => {
        item.id = index + 1;
      });
    },
    // 查询课程评价列表
    async questionList() {
      const { rows, code, msg, total } = await questionList(this.queryParams);
      if (code === 200) {
        this.tableData = rows;
        this.total = total;
      } else {
        this.$message.error(msg);
      }
    },
    // 添加课堂评价
    addSure() {
      // return
      this.$refs.paramsInfo.validate(async (valid) => {
        if (valid) {
          const list = [];
          let found = false;
          for (const key in this.selectContent) {
            if (this.selectContent[key].value == "") {
              found = true;
              break;
            } else {
              found = false;
              list.push(this.selectContent[key].value);
            }
          }
          if (found == false) {
            this.paramsInfo.comment = list.toString();
            const { data, code, msg } =
              this.type == 1
                ? await questionAdd(this.paramsInfo)
                : await questionEdit(this.paramsInfo);
            if (code === 200) {
              this.dialogVisible = false;
              this.$message.success(this.type == 1 ? "添加成功" : "修改成功");
              this.questionList();
              this.$refs.paramsInfo.resetFields();
            } else {
              this.$message.success(msg);
            }
          } else {
            this.$message.error("请输入完整的可选内容");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.assessment {
  padding: 20px;
}

.assessment-dialig el-input {
  width: 300px !important;
}
</style>
